<template>
	<NavBar title="推荐" />
	<FixedFun />
	<BgLinear />
	<!--  对scroll-view设置margin不好，在外面包一个容器做边界距离 -->
	<view class="box-all">
		<scroll-view class="box-day-get-history" scroll-y="true">
			<view class="box-DayGetRow">
				<DayGetRow :hiden_title="true" :daysAgo="0">
					<template #="arg">
						<view class="box-title">
							<view class="text-right">
								<uni-icons class="deep-size" type="calendar"></uni-icons>
								<!-- <uni-dateformat :date="Date.now()" format="yy年M月d日" /> -->
								<text>今天</text>
							</view>
							<view class="text-left" @click="open_dayGetColumn(0)">
								<text>共{{ arg.total }}张</text>
								<uni-icons type="right"></uni-icons>
							</view>
						</view>
					</template>
				</DayGetRow>
			</view>

			<view v-for="i in num" :key="i" class="box-DayGetRow">
				<DayGetRow :hiden_title="true" :daysAgo="i">
					<template #="arg">
						<view class="box-title">
							<view class="text-right">
								<uni-icons class="deep-size" type="calendar"></uni-icons>
								<uni-dateformat
									:date="Date.now() - (i - 1) * 86400000"
									format="yy年M月d日"
								/>
							</view>
							<view class="text-left" @click="open_dayGetColumn(i)">
								<text>共{{ arg.total }}张</text>
								<uni-icons type="right"></uni-icons>
							</view>
						</view>
					</template>
				</DayGetRow>
			</view>
			<Barload :status="barload_status" />
		</scroll-view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import { onReachBottom, onPageScroll } from '@dcloudio/uni-app'

const barload_status = ref('loading')
const num = ref(2)

onReachBottom(() => {
	// 这个永远看不完过
	num.value += 2
	// 最后一项慢点加进来，不然会导致滚动太快就失效！
	setTimeout(() => {
		num.value++
	}, 360)
})
onPageScroll(() => {})

const open_dayGetColumn = function (daysAgo) {
	let arg = '?daysAgo=' + daysAgo
	uni.navigateTo({
		url: '/pages/dayGetHistory/dayGetColumn/dayGetColumn' + arg
	})
}
</script>

<style lang="scss" scoped>
.box-all {
	margin: 0 $my-margin-rpx;

	.box-day-get-history {
		.box-DayGetRow {
			margin-bottom: 50rpx;
			.box-title {
				font-size: 32rpx;
				color: #444;
				margin-bottom: 15rpx;
				@extend .f-c-c-n;
				justify-content: space-between;
				.text-right {
					padding: 0 10rpx;
					background: linear-gradient(to right, #ffd3b5, transparent);
				}

				.text-left {
					border-radius: 100rpx;
					padding: 0 20rpx 0 30rpx;
					background: radial-gradient(circle, #ffd3b5, transparent);
				}
			}
		}
	}
}
</style>
